﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>zyOffice-vue-示例</title>
    <link href="umeditor/themes/default/css/umeditor.min.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="umeditor/third-party/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="umeditor/umeditor.config.js"></script>
    <script type="text/javascript" src="umeditor/umeditor.min.js"></script>
    <link type="text/css" rel="Stylesheet" href="demo.css" />
    <link type="text/css" rel="Stylesheet" href="zyoffice/js/skygqbox.css" />
    <script type="text/javascript" src="zyoffice/js/json2.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="zyoffice/js/skygqbox.js" charset="utf-8"></script>
    <script type="text/javascript" src="zyoffice/js/w.js" charset="utf-8"></script>
    <script type="text/javascript" src="vue.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="demo.js" charset="utf-8"></script>
</head>
<body>
    <div id="demos"></div>    
    <div id="ue" style="width:800px;margin:20px auto 40px;">
        <ueditor ref="ue"></ueditor>
    </div>
    <script>
        Vue.component('ueditor', {
            data: function(){
                return {
                    editor: null
                }
            },
            props: {
                value: '',
                config: {}
            },
            mounted: function(){
                zyOffice.getInstance({
                    word: "http://localhost:13710/zyoffice/word/convert",
					wordExport:"http://localhost:13710/zyoffice/word/export",
					pdf:"http://localhost:13710/zyoffice/pdf/upload"                    
                });//加载控件

                UM.registerUI('zyoffice',
                    function (name) {
                        var me = this;
                        var $btn = $.eduibutton({
                            icon: name,
                            click: function () {
                                zyOffice.getInstance().api.openDoc();
                            },
                            title: '导入Word文档（docx格式）'
                        });

                        this.addListener('ready', function () {
                            zyOffice.getInstance().SetEditor(this);
                        });
                        return $btn;
                    }
                );
				UM.registerUI('zywordexport',
					function (name) {
						var me = this;
						var $btn = $.eduibutton({
							icon: name,
							click: function () {
								zyOffice.getInstance().api.exportWord();
							},
							title: '导出Word文档（docx格式）'
						});

						this.addListener('ready', function () {
							zyOffice.getInstance().SetEditor(this);
						});
						return $btn;
					}
				);
				UM.registerUI('zyofficepdf',
					function (name) {
						var me = this;
						var $btn = $.eduibutton({
							icon: name,
							click: function () {
								zyOffice.getInstance().api.openPdf();
							},
							title: '导入PDF文档'
						});

						this.addListener('ready', function () {
							zyOffice.getInstance().SetEditor(this);
						});
						return $btn;
					}
				);
                UM.getEditor('editor');
            },
            methods: {
                getUEContent: function(){
                    return this.editor.getContent()
                }
            },
            destroyed: function(){
                this.editor.destroy()
            },
            template: '<div><textarea id="editor" name="editor" style="width:100%;height:360px;"/></div>'
        });

        var ue = new Vue({
            el: '#ue',
            data: {
            }
            , mounted: function () {
            }
        });

    </script>
</body>
</html>
